<template>
  <div class="audit">
    <!-- 按钮开始 -->
    <div class="button">
      <el-button  size='small' type="primary" class="d" @click="moreshanH">批量删除</el-button>
      <el-input size='small' v-model="list.content" placeholder="请输入内容" class="wenzi"></el-input>
      <el-button  size='small'  type="primary"  @click="findH">查询</el-button>
    </div> 
    <!-- 按钮结束 -->
    <!-- 表格开始 -->
      <el-table
      size='small'
        ref="multipleTable"
        :data="orders"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="序号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="content"
          label="评论内容"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="customerId"
          label="顾客编号"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="orderId"
          label="订单编号"
          show-overflow-tooltip>
          </el-table-column>
        <el-table-column
          prop="status"
          label="评论状态"
          width="120">

        <template slot-scope="scope">
      <!-- @click="passH(scope.row.xx)绑定事件 -->
                   <el-button type="text" @click="passH(scope.row.id)" style="color:#4e80b1">通过</el-button>
                 <el-button type="text" @click="nopassH(scope.row.id)" style="color:#ff5858">不通过</el-button>             
              </template>  

          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
          <el-table-column
          prop=""
          label="操作"
          show-overflow-tooltip>

            <template slot-scope="scope">
      <!-- @click="passH(scope.row.xx)绑定事件 -->
                   <el-button type="text" @click="shanH(scope.row.id)" style="color:#ffc93a">删除</el-button>             
              </template>  

          </el-table-column>
      </el-table>
    <!-- 表格结束-->
    <!-- 分页开始 -->
    <!-- 分页开始 -->
    <div class="page">
      <el-pagination
      size='small'
          @current-change="changeHandler"
          :page-sizes="[2, 5, 10, 15,20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="2">
        </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
 data(){
   return{
     list:{
        page:1,
        pageSize:5
      },
    input:''
   }
 },
 computed:{
  ...mapState('audit_order',['orders','total'])
 },
 methods:{
  ...mapActions('audit_order',['findAllOrders','auditShan','aduitPass','aduitNoPass',,'auditMoreShan']),
  //分页
    changeHandler(page){
      this.list.page = page
      this.findAllOrders(this.list)
    },
  //查询
   // findAllOrders里定义的
    findH(){
      this.findAllOrders(this.list)
    },

     // 删除
    // 按钮click绑定的
     shanH(id){
        let params = {
          id
        }
      // auditShan js里定义的
        this.auditShan(params).then(res =>{
          if(res.status === 200){
      // findAllOrders里定义的
            this.findAllOrders(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },
  // 通过
    // 按钮click绑定的
     passH(id){
        let params = {
          id
        }
      // aduitPassjs里定义的
        this.aduitPass(params).then(res =>{
          if(res.status === 200){
      // findAllOrders里定义的
            this.findAllOrders(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },

// 不通过
    nopassH(id){
        let params = {
          id
        }
        this.aduitNoPass(params).then(res =>{
          if(res.status === 200){
            this.findAllOrders(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },

 // 批量删除
    // 按钮click绑定的
     moreshanH(id){
        let params = {
          id
        }
        
      // auditMoreShan js里定义的
        this.auditMoreShan(params).then(res =>{
          if(res.status === 200){
      // findAllOrders里定义的
            this.findAllOrders(this.list)
            this.$message({
              type:'success',
              message: res.message
            }) 
            
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },


 },

 created(){
    this.findAllOrders(this.list)
 }
}
</script>

<style scoped>
.button {
  display: flex;
}
.wenzi{
  width: 190px;
  padding-left: 20px;
  padding-right: 20px;
}
.d {
  background-color:#ff4949;
}
.page {
  float: right;
}
</style>